import React, { Component } from 'react'

import "./map.less"

const AMap = window.AMap

class Map extends Component {
    state = {
        map: null,
    }
    render() {
        return (
            <div className="map_box">
                {/* <div className="map_top_box">
                    <span className="iconfont icon-fanhui2 map_top_span"></span>
                    <span className="map_top_span2">位置</span>
                </div> */}
                <div id="container" style={{ width: '100vw', height: '0' }}></div>

                <span className="city_name"></span>
            </div>
        )
    }

    componentDidMount() {
        let { map } = this.props
        let that = this
        map = new AMap.Map('container', {
            center: [116.397128, 39.916527],
            zoom: 13,
            resizeEnable: true,
        })

        // 获取当前精确定位
        map.plugin(['AMap.Geolocation'], function () {
            let geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 2000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 100000,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 40),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                // showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falseF
            })

            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                // 获取当前自己定位
                if (status === 'complete') {//获取当前定位城市放入缓存中
                    localStorage.setItem("list_city_name", JSON.stringify(result.addressComponent.province))
                    localStorage.setItem("list_personal_locator", JSON.stringify([result.position.lng,result.position.lat]))
                }
            })
        })

        // 获取点击的经纬度
        map.on("click", (e) => {
            let a = [Number(e.lnglat.getLng()), Number(e.lnglat.getLat())]
            let b = [116.397128, 39.916527]
            // 两点间的最短距离
            var dis = AMap.GeometryUtil.distance(a, b);
            console.log(dis);
        })

    }




}

export default Map
